<template>
  <PageContainer>
    <view class="container">
      <Header title="报名详情"></Header>
      <view class="user-info">
        <view>
          <TImage
            :src="activityRegister?.avatar"
            width="120rpx"
            height="144rpx"
            borderRadius="8rpx"
            error-img-type="person"
          ></TImage>
        </view>
        <view class="info">
          <view class="name-position">
            <text class="name">{{ activityRegister?.personName }}</text>
            <CustomTag
              :text="activityRegister?.memberLevelName"
              background-color="#D0F7FF"
              color="#2878FF"
            ></CustomTag>
          </view>
          <view class="company">{{ activityRegister?.companyName }}</view>
          <view class="time">报名类型：{{ activityRegister?.ticketName }}</view>
          <view class="time">报名提交人：{{ activityRegister?.gmatName }}</view>
          <view class="time">提交时间：{{ activityRegister?.createTime }}</view>
          <view v-if="activityRegister?.payMoney" class="time">实付金额：{{ formatMoney({ money: activityRegister?.payMoney || 0 }) }}</view>
        </view>
      </view>
      <view>
        <BasicsForm disabled :btn-group-options="{}" @register="formRegister"></BasicsForm>
      </view>
    </view>
    <template v-if="activityRegister?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW">
      <TButtonGroup>
        <TButton
          class="gutter-btn"
          type="warn"
          text="驳回申请"
          :icon="'\ueaf2'"
          @click="showModal('reject')"
        />
        <TButton
          class="gutter-btn"
          type="primary"
          text="通过申请"
          :icon="'\ue60d'"
          @click="showModal('pass')"
        />
      </TButtonGroup>
      <ShowModal
        v-model="modalVisible"
        :title="modalTitle"
        content-width="100%"
        :confirm-text="modalConfirmText"
        :confirm-color="modalConfirmColor"
        @confirm="onSubmit"
      >
        <template #content>
          <view class="pa-20" style="width: 100%">
            <view v-if="modalTips" class="pb-16 fz-14" style="color: #999996">{{ modalTips }}</view>
            <view v-if="status == ApprovalStatusEnum.PASSED" class="pb-16 fz-14">
              确定要通过TA的活动报名申请吗？
            </view>
            <view
              v-if="status == ApprovalStatusEnum.REJECT"
              class="pb-16 fz-14"
              style="color: #999996"
            >
              告知一下用户为什么会被驳回吧
            </view>
            <view style="background-color: #f2f3f5" v-if="status == ApprovalStatusEnum.REJECT">
              <UniEasyinput v-model="remark" type="textarea" placeholder="请输入审核说明" />
            </view>
          </view>
        </template>
      </ShowModal>
    </template>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* signUpDetail 报名详情 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import OfficialAccount from '@/components/OfficialAccount/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { useForm } from '@/components/Form';
  import { ref } from 'vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { navigateBack, onLoad } from '@/router';
  import type { IActivityRegister, IActivityRegisterFormItem } from '@/api/activity/types';
  import { activityRegisterAudit, activityRegisterFormItem } from '@/api/activity';
  import { IsInternalInterfaceEnum, IsRequired } from '@/enums/formEnum';
  import { localDataMapping } from '@/components/Form/hooks/useForm';
  import { ApprovalStatusEnum } from '@/enums/activityStatusEnum';
  import { Toast } from '@/utils';
  import type { FunctionArgs } from '@vueuse/core';
  import { formatMoney } from '@/utils/number';

  const headerHeight = uni.upx2px(500);

  const activityRegister = ref<IActivityRegister>();

  let success: FunctionArgs | null = null;
  onLoad<'signUpDetail'>((op) => {
    activityRegister.value = op.activityRegister;
    success = op.success;
  });

  // 报名信息表单

  const [register, { appendSchemaByField }] = useForm({
    formInteractionMode: 'details',
  });
  const queryActivityRegisterFormItem = async () => {
    const { activityFormItemMap, activityFormUserAnswerList } = await activityRegisterFormItem({
      activityId: activityRegister.value!.activityId,
      activityRegisterId: activityRegister.value!.id,
    });

    const typeDataName: { type: string; field: string }[] = [];
    const dictDataName: { type: string; field: string }[] = [];

    for (const key in activityFormItemMap) {
      const formItem = activityFormItemMap[key];
      appendSchemaByField({
        field: 'Divider' + key,
        component: 'Divider',
        label: '报名信息',
      });
      for (const formItemKey in formItem) {
        const formItemValue = formItem[formItemKey];

        const {
          showName,
          id,
          dataType,
          type,
          isInternalInterface,
          isRequired,
          customFormItemAnswerList,
          itemType,
          itemDefault,
        } = formItemValue;

        const field = id.toString();

        if (isInternalInterface === IsInternalInterfaceEnum.CLASSIFICATION) {
          typeDataName.push({ field, type });
        } else if (isInternalInterface === IsInternalInterfaceEnum.DICTIONARY) {
          dictDataName.push({ field, type });
        }

        appendSchemaByField({
          field,
          component: itemType,
          label: showName,
          dataType,
          isInternalInterface,
          required: isRequired === IsRequired.REQUIRED,
          dynamicDisabled: true,
          componentProps: {
            limit: formItemValue.length,
            itemDefault: itemDefault,
            localdata: localDataMapping(customFormItemAnswerList, {
              label: 'words',
              value: 'id',
            }),
          },
          defaultValue: activityFormUserAnswerList.find((item) => item.formItemId === id)?.content,
        });
      }
    }
  };

  function formRegister(event: any) {
    register(event);
    queryActivityRegisterFormItem();
  }

  // 审核

  const modalVisible = ref(false);
  const modalTitle = ref('');
  const modalConfirmText = ref('');
  const modalConfirmColor = ref('');
  const modalTips = ref('');
  const status = ref<ApprovalStatusEnum>(ApprovalStatusEnum.PASSED);
  const remark = ref('');

  function showModal(type: 'pass' | 'reject' | 'termination') {
    modalTips.value = '';
    if (type === 'pass') {
      modalTitle.value = '通过活动报名申请';
      modalConfirmText.value = '通过申请';
      modalConfirmColor.value = '#2878FF';
      status.value = ApprovalStatusEnum.PASSED;
    }
    if (type === 'reject') {
      modalTitle.value = '驳回活动报名申请';
      modalConfirmText.value = '立即驳回';
      modalConfirmColor.value = '#EA5E0E';
      status.value = ApprovalStatusEnum.REJECT;
    }

    modalVisible.value = true;
  }

  async function onSubmit() {
    await activityRegisterAudit({
      registerId: activityRegister.value!.id,
      status: status.value,
      remarks: remark.value,
    });
    Toast({
      duration: 1000,
      title: `${status.value === ApprovalStatusEnum.PASSED ? '已通过报名申请' : '已驳回报名申请'}`,
      success: () => {
        navigateBack();
        success?.();
      },
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    .user-info {
      display: flex;
      padding: 32rpx;
      gap: 24rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      .info {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
        .name-position {
          display: flex;
          align-items: center;
          gap: 16rpx;
          .name {
            color: #333;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 48rpx;
          }
        }
        .company {
          font-size: 24rpx;
          line-height: 40rpx;
        }
        .time {
          color: #999996;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }
  }
</style>
